<template>
	<view class="container">
		<view class="order-list">
			<view class="order-item" v-for="(item, index) in orderList" :key="index" @click="goToDetail(item.order_no)">
				<view class="order-header">
					<text class="order-no">订单号：{{item.order_no}}</text>
					<text class="order-status" :class="'status-' + item.status">{{getStatusText(item.status)}}</text>
				</view>
				<view class="order-info">
					<text class="shop-name">{{item.shop_name}}</text>
					<text class="create-time">{{item.createtime}}</text>
				</view>
			</view>
		</view>
		
		<!-- 空状态 -->
		<view class="empty" v-if="orderList.length === 0">
			<image src="/static/imgs/empty-order.png" mode="aspectFit"></image>
			<text>暂无订单</text>
		</view>
		
		<!-- 加载更多 -->
		<uni-load-more :status="loadMoreStatus"></uni-load-more>
	</view>
</template>

<script>
	import { getAdminOrderList } from '@/service/api/order.js'
	
	export default {
		data() {
			return {
				orderList: [],
				page: 1,
				loadMoreStatus: 'more'
			}
		},
		onLoad() {
			this.loadData()
		},
		onPullDownRefresh() {
			this.page = 1
			this.loadData(true)
		},
		onReachBottom() {
			if (this.loadMoreStatus === 'more') {
				this.page++
				this.loadData()
			}
		},
		methods: {
			async loadData(isRefresh = false) {
				if (isRefresh) {
					this.orderList = []
				}
				
				this.loadMoreStatus = 'loading'
				try {
					const [err, res] = await getAdminOrderList({
						page: this.page
					})
					
					if (!err) {
						const list = res.list || []
						if (isRefresh) {
							this.orderList = list
						} else {
							this.orderList = [...this.orderList, ...list]
						}
						
						this.loadMoreStatus = list.length < 10 ? 'noMore' : 'more'
					} else {
						this.loadMoreStatus = 'more'
					}
				} catch (e) {
					console.error(e)
					this.loadMoreStatus = 'more'
				}
				
				if (isRefresh) {
					uni.stopPullDownRefresh()
				}
			},
			getStatusText(status) {
				const statusMap = {
					1: '待付款',
					2: '已完成',
					3: '已取消',
					4: '已失效',
					5: '已关闭'
				}
				return statusMap[status] || '未知状态'
			},
			goToDetail(order_no) {
        uni.navigateTo({
          url: '/pages/order/admin-detail?order_no=' + order_no
        })
			}
		}
	}
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background: #f5f5f5;
	padding: 20rpx;
}

.order-list {
	.order-item {
		background: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		
		.order-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			
			.order-no {
				font-size: 28rpx;
				color: #666;
			}
			
			.order-status {
				font-size: 28rpx;
				
				&.status-0 { color: #ff9900; }
				&.status-1 { color: #2979ff; }
				&.status-2 { color: #19be6b; }
				&.status-3 { color: #2979ff; }
				&.status-4 { color: #19be6b; }
				&.status-5 { color: #999; }
			}
		}
		
		.order-info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.shop-name {
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
			}
			
			.create-time {
				font-size: 26rpx;
				color: #999;
			}
		}
	}
}

.empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 200rpx;
	
	image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 20rpx;
	}
	
	text {
		font-size: 28rpx;
		color: #999;
	}
}
</style> 